<!--
    🚨🚨温馨提示🚨🚨
    下面代码是程序自动生成，可能存在个别无法运行，如果无法运行，请调整下echarts版本，或者自行浏览器查看报错信息进行修复；
    下面代码分为 echarts框架代码这个代码主要用于能运行起来echarts，还有就是核心代码（用🚨🚨非常重要🚨🚨进行标注了），核心代码主要用于显示案例效果
    如果有问题请打开社区网站 https://www.makeapie.cn 添加右上角微信群/qq群进行询问
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>www.makeApie.cn - ECharts案例下载 - 中国地图</title>
    <!--
        🚨🚨非常重要🚨🚨：设置相对路径资源url链接
        如果你需要本地使用，请下载下来，假设下面代码中有个相对路径资源 /dep/echarts/map/js/china.js，👉👉下载方法：https://www.makeapie.cn/dep/echarts/map/js/china.js
    -->
    <base href="https://www.makeapie.cn/" />

    <!-- 引入刚刚下载的 ECharts 文件 和 jquery -->
    <script
      type="text/javascript"
      src="https://registry.npmmirror.com/echarts/4.2.1/files/dist/echarts.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js"
    ></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
    </style>

    <!--
        🚨🚨非常重要🚨🚨：下面是运行案例需要的第三方脚本，如果是相对链接，下载方法看上面👆👆
        如果你需要本地使用，请下载下来，假设下面代码中有个相对路径资源 /dep/echarts/map/js/china.js，下载方法：https://www.makeapie.cn/dep/echarts/map/js/china.js
    -->
    <!--暂无第三方脚本-->
    <script type="text/javascript" src="/dep/echarts/map/js/china.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div
      id="chart-panel"
      style="
        width: calc(100vw - 200px);
        height: calc(100vh - 200px);
        padding: 100px;
        margin: 0 auto;
      "
    ></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("chart-panel"));
      // 指定图表的配置项和数据
      var option = {};

      //=============== start ===============//
      /**
       * 🚨🚨非常重要🚨🚨
       * 下面是 网站左侧代码，核心代码
       */
      var mapName = "china";
      var data = [
        { name: "北京", value: 199 },
        { name: "天津", value: 42 },
        { name: "河北", value: 102 },
        { name: "山西", value: 81 },
        { name: "内蒙古", value: 47 },
        { name: "辽宁", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 123 },
        { name: "上海", value: 24 },
        { name: "江苏", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 180 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 },
      ];

      var geoCoordMap = {};
      var toolTipData = [
        {
          name: "北京",
          value: [
            { name: "科技人才总数", value: 95 },
            { name: "理科", value: 82 },
          ],
        },
        {
          name: "天津",
          value: [
            { name: "文科", value: 22 },
            { name: "理科", value: 20 },
          ],
        },
        {
          name: "河北",
          value: [
            { name: "文科", value: 60 },
            { name: "理科", value: 42 },
          ],
        },
        {
          name: "山西",
          value: [
            { name: "文科", value: 40 },
            { name: "理科", value: 41 },
          ],
        },
        {
          name: "内蒙古",
          value: [
            { name: "文科", value: 23 },
            { name: "理科", value: 24 },
          ],
        },
        {
          name: "辽宁",
          value: [
            { name: "文科", value: 39 },
            { name: "理科", value: 28 },
          ],
        },
        {
          name: "吉林",
          value: [
            { name: "文科", value: 41 },
            { name: "理科", value: 41 },
          ],
        },
        {
          name: "黑龙江",
          value: [
            { name: "文科", value: 35 },
            { name: "理科", value: 31 },
          ],
        },
        {
          name: "上海",
          value: [
            { name: "文科", value: 12 },
            { name: "理科", value: 12 },
          ],
        },
        {
          name: "江苏",
          value: [
            { name: "文科", value: 47 },
            { name: "理科", value: 45 },
          ],
        },
        {
          name: "浙江",
          value: [
            { name: "文科", value: 57 },
            { name: "理科", value: 57 },
          ],
        },
        {
          name: "安徽",
          value: [
            { name: "文科", value: 57 },
            { name: "理科", value: 52 },
          ],
        },
        {
          name: "福建",
          value: [
            { name: "文科", value: 59 },
            { name: "理科", value: 57 },
          ],
        },
        {
          name: "江西",
          value: [
            { name: "文科", value: 49 },
            { name: "理科", value: 42 },
          ],
        },
        {
          name: "山东",
          value: [
            { name: "文科", value: 67 },
            { name: "理科", value: 52 },
          ],
        },
        {
          name: "河南",
          value: [
            { name: "文科", value: 69 },
            { name: "理科", value: 68 },
          ],
        },
        {
          name: "湖北",
          value: [
            { name: "文科", value: 60 },
            { name: "理科", value: 56 },
          ],
        },
        {
          name: "湖南",
          value: [
            { name: "文科", value: 62 },
            { name: "理科", value: 52 },
          ],
        },
        {
          name: "重庆",
          value: [
            { name: "文科", value: 47 },
            { name: "理科", value: 44 },
          ],
        },
        {
          name: "四川",
          value: [
            { name: "文科", value: 65 },
            { name: "理科", value: 60 },
          ],
        },
        {
          name: "贵州",
          value: [
            { name: "文科", value: 32 },
            { name: "理科", value: 30 },
          ],
        },
        {
          name: "云南",
          value: [
            { name: "文科", value: 42 },
            { name: "理科", value: 41 },
          ],
        },
        {
          name: "西藏",
          value: [
            { name: "文科", value: 5 },
            { name: "理科", value: 4 },
          ],
        },
        {
          name: "陕西",
          value: [
            { name: "文科", value: 38 },
            { name: "理科", value: 42 },
          ],
        },
        {
          name: "甘肃",
          value: [
            { name: "文科", value: 28 },
            { name: "理科", value: 28 },
          ],
        },
        {
          name: "青海",
          value: [
            { name: "文科", value: 5 },
            { name: "理科", value: 5 },
          ],
        },
        {
          name: "宁夏",
          value: [
            { name: "文科", value: 10 },
            { name: "理科", value: 8 },
          ],
        },
        {
          name: "新疆",
          value: [
            { name: "文科", value: 36 },
            { name: "理科", value: 31 },
          ],
        },
        {
          name: "广东",
          value: [
            { name: "文科", value: 63 },
            { name: "理科", value: 60 },
          ],
        },
        {
          name: "广西",
          value: [
            { name: "文科", value: 29 },
            { name: "理科", value: 30 },
          ],
        },
        {
          name: "海南",
          value: [
            { name: "文科", value: 8 },
            { name: "理科", value: 6 },
          ],
        },
      ];

      /*获取地图数据*/
      myChart.showLoading();
      var mapFeatures = echarts.getMap(mapName).geoJson.features;
      myChart.hideLoading();
      mapFeatures.forEach(function (v) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;
      });
      console.log("geoCoordMap", geoCoordMap);

      console.log(data);
      console.log(toolTipData);
      var max = 480,
        min = 9; // todo
      var maxSize4Pin = 100,
        minSize4Pin = 20;

      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      };
      option = {
        tooltip: {
          padding: 0,
          enterable: true,
          transitionDuration: 1,
          textStyle: {
            color: "#000",
            decoration: "none",
          },
          // position: function (point, params, dom, rect, size) {
          //   return [point[0], point[1]];
          // },
          formatter: function (params) {
            // console.log(params)
            var tipHtml = "";
            tipHtml =
              '<div style="width:280px;height:180px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' +
              '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px;box-sizing:border-box;">' +
              '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' +
              "</i>" +
              '<span style="margin-left:10px;color:#fff;font-size:16px;">' +
              params.name +
              "</span>" +
              "</div>" +
              '<div style="padding:20px">' +
              '<p style="color:#fff;font-size:12px;">' +
              '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
              "</i>" +
              "单位总数：" +
              '<span style="color:#11ee7d;margin:0 6px;">' +
              toolTipData.length +
              "</span>" +
              "个" +
              "</p>" +
              '<p style="color:#fff;font-size:12px;">' +
              '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
              "</i>" +
              "总人数：" +
              '<span style="color:#f48225;margin:0 6px;">' +
              toolTipData.length +
              "</span>" +
              "个" +
              "</p>" +
              '<p style="color:#fff;font-size:12px;">' +
              '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
              "</i>" +
              "总人数：" +
              '<span style="color:#f4e925;margin:0 6px;">' +
              toolTipData.length +
              "</span>" +
              "个" +
              "</p>" +
              '<p style="color:#fff;font-size:12px;">' +
              '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
              "</i>" +
              "总人数：" +
              '<span style="color:#25f4f2;margin:0 6px;">' +
              toolTipData.length +
              "</span>" +
              "个" +
              "</p>" +
              "</div>" +
              "</div>";
            setTimeout(function () {
              tooltipCharts(params.name);
            }, 10);
            return tipHtml;
          },
        },

        visualMap: {
          show: true,
          min: 0,
          max: 200,
          left: "10%",
          top: "bottom",
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ["#04387b", "#467bc0"], // 蓝绿
          },
        },
        geo: {
          show: true,
          map: mapName,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: "#023677",
              borderColor: "#1180c7",
            },
            emphasis: {
              areaColor: "#4499d0",
            },
          },
        },
        series: [
          {
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            data: convertData(data),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#fff",
              },
            },
          },
          {
            type: "map",
            map: mapName,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#3B5077",
              },
              emphasis: {
                areaColor: "#2B91B7",
              },
            },
            animation: false,
            data: data,
          },
          {
            name: "点",
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 6,
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(
              data
                .sort(function (a, b) {
                  return b.value - a.value;
                })
                .slice(0, 10)
            ),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "left",
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "yellow",
                shadowBlur: 10,
                shadowColor: "yellow",
              },
            },
            zlevel: 1,
          },
        ],
      };
      //=============== end ===============//

      // 使用刚指定的配置项和数据显示图表。
      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
      window.addEventListener("resize", myChart.resize);
    </script>
  </body>
</html>
